<!--

    Copyright (c) 2015 Red Hat, Inc.
    All rights reserved. This program and the accompanying materials
    are made available under the terms of the Eclipse Public License v1.0
    which accompanies this distribution, and is available at
    http://www.eclipse.org/legal/epl-v10.html

    Contributors:
      Red Hat, Inc. - initial API and implementation

-->
<che-toolbar che-title="User Management"></che-toolbar>
<md-content flex md-scroll-y md-theme="maincontent-theme" class="admins-user-management">
  <div class="progress-line">
    <md-progress-linear ng-show="adminsUserManagementCtrl.isLoading" md-mode="indeterminate"></md-progress-linear>
  </div>
  <div>
    <che-list-header flex="100"
                     che-input-placeholder="Search"
                     che-search-model="adminsUserManagementCtrl.userFilter.name"
                     che-on-search-change="adminsUserManagementCtrl.onSearchChanged(str)"
                     che-hide-search="adminsUserManagementCtrl.users.length === 0"
                     che-add-button-title="Add User"
                     che-on-add="adminsUserManagementCtrl.showAddUserDialog($event)"
                     che-delete-button-title="Delete"
                     che-on-delete="adminsUserManagementCtrl.deleteSelectedUsers()"
                     che-hide-delete="adminsUserManagementCtrl.cheListHelper.isNoItemSelected"
                     che-hide-header="adminsUserManagementCtrl.cheListHelper.visibleItemsNumber === 0">
      <div flex="100"
           layout="row"
           layout-align="start stretch"
           class="che-list-item-row">
        <div layout="column" layout-gt-xs="row"
             layout-align="start center"
             class="che-checkbox-area">
          <div layout="row" layout-align="start center" class="che-list-item-checkbox-main">
            <md-checkbox class="che-list-item-checkbox"
                         aria-label="Bulk check on users"
                         ng-checked="adminsUserManagementCtrl.cheListHelper.areAllItemsSelected"
                         ng-click="adminsUserManagementCtrl.cheListHelper.changeBulkSelection()"></md-checkbox>
          </div>
        </div>
        <div flex hide-xs layout-gt-xs="row"
             layout-align="start center"
             class="che-list-item-details">
          <che-list-header-column flex-gt-xs="40"
                                  che-sort-value='adminsUserManagementCtrl.userOrderBy'
                                  che-sort-item='email'
                                  che-column-title='Email'></che-list-header-column>
          <che-list-header-column flex-gt-xs="20"
                                  che-sort-value='adminsUserManagementCtrl.userOrderBy'
                                  che-sort-item='name'
                                  che-column-title='Login'></che-list-header-column>
          <che-list-header-column flex-gt-xs="20"
                                  che-column-title='Organizations'></che-list-header-column>
          <che-list-header-column flex-gt-xs="20"
                                  che-column-title='Actions'></che-list-header-column>
        </div>
      </div>
    </che-list-header>
    <che-list flex ng-if="adminsUserManagementCtrl.users && adminsUserManagementCtrl.users.length > 0">
      <che-list-item
              ng-repeat="user in adminsUserManagementCtrl.cheListHelper.getVisibleItems() | orderBy:adminsUserManagementCtrl.userOrderBy"
              ng-init="adminsUserManagementCtrl.updateUserOrganizationsCount(user.id)"
              flex-gt-sm="100" flex="33"
              ng-mouseover="hover=true"
              ng-mouseout="hover=false">
        <div flex="100"
             layout="row"
             layout-align="start stretch"
             class="che-list-item-row">
          <div layout="row"
               layout-align="start center"
               class="che-checkbox-area">
            <che-list-item-checked ng-model="adminsUserManagementCtrl.cheListHelper.itemsSelectionStatus[user.id]"
                                   ng-click="adminsUserManagementCtrl.cheListHelper.updateBulkSelectionStatus()"
                                   che-aria-label-checkbox="User {{user.id}}"></che-list-item-checked>
          </div>
          <div flex
               layout-xs="column" layout-gt-xs="row"
               layout-align-gt-xs="start center"
               layout-align-xs="start start"
               class="che-list-item-details">
            <div flex-gt-xs="40"
                 class="che-list-item-name"
                 ng-click="adminsUserManagementCtrl.redirectToUserDetails(user.id)">
              <span class="che-xs-header noselect" hide-gt-xs>Email</span>
              <span><img class="user-face" gravatar-src="user.email"></span>
              <span class="user-email">{{user.email}}</span>
            </div>
            <div flex-gt-xs="20"
                 ng-click="adminsUserManagementCtrl.redirectToUserDetails(user.id)">
              <span class="che-xs-header noselect" hide-gt-xs>Login</span>
              <span class="user-description">{{user.name}}</span>
            </div>
            <div flex-gt-xs="20"
                 ng-click="adminsUserManagementCtrl.redirectToUserDetails(user.id, 'Organization')">
              <span class="che-xs-header noselect" hide-gt-xs>Organizations</span>
              <span class="user-description">{{adminsUserManagementCtrl.userOrganizationCount[user.id] ? adminsUserManagementCtrl.userOrganizationCount[user.id] : '-'}}</span>
            </div>
            <div flex-gt-xs="20"
                 ng-click="adminsUserManagementCtrl.redirectToUserDetails(user.id)">
              <span class="che-xs-header noselect" hide-gt-xs>Actions</span>
                  <span class="che-list-actions">
                    <div ng-click="adminsUserManagementCtrl.removeUser($event, user);" uib-tooltip="Remove user">
                      <span class="material-design icon-ic_remove_circle_outline_24px"></span>
                    </div>
                  </span>
            </div>
          </div>
        </div>
      </che-list-item>
      <div class="paging-buttons-area" ng-if="adminsUserManagementCtrl.isPagination()">
        <md-button
                ng-disabled="!adminsUserManagementCtrl.hasPreviousPage()"
                ng-click="adminsUserManagementCtrl.fetchUsersPage('first');">
          <span><<</span>
        </md-button>
        <md-button
                ng-disabled="!adminsUserManagementCtrl.hasPreviousPage()"
                ng-click="adminsUserManagementCtrl.fetchUsersPage('prev');">
          <span><</span>
        </md-button>
        <md-button disabled>
          <span>{{adminsUserManagementCtrl.pagesInfo.currentPageNumber}}</span>
        </md-button>
        <md-button
                ng-disabled="!adminsUserManagementCtrl.hasNextPage()"
                ng-click="adminsUserManagementCtrl.fetchUsersPage('next');">
          <span>></span>
        </md-button>
        <md-button
                ng-disabled="!adminsUserManagementCtrl.hasNextPage()"
                ng-click="adminsUserManagementCtrl.fetchUsersPage('last');">
          <span>>></span>
        </md-button>
      </div>
    </che-list>
    <div class="che-list-empty">
        <span ng-show="adminsUserManagementCtrl.users.length > 0 && adminsUserManagementCtrl.cheListHelper.visibleItemsNumber === 0">
          No users found.
        </span>
      <span ng-show="adminsUserManagementCtrl.users.length === 0">There are no users.</span>
    </div>
  </div>
</md-content>
